<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PWA缓存更新示例</title>

    <!-- PWA配置 -->
    <link rel="manifest" href="/manifest.json">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="theme-color" content="#4285f4">
    <link rel="apple-touch-icon" href="/icons/icon-192x192.png">

    <!-- 样式表将由Webpack自动注入 -->
    
    <!-- 内联关键CSS，确保首次渲染速度 -->
    <style>
        /* 关键CSS - 页面渲染核心样式 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; color: #333; background-color: #f9f9f9; }
        header { background-color: #4285f4; color: white; padding: 1rem; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
        main { max-width: 800px; margin: 0 auto; padding: 1.5rem; width: 100%; }
        
        /* 加载状态样式 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.9);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.3s ease-out;
        }
        
        .loading-overlay.hidden {
            opacity: 0;
            pointer-events: none;
        }
        
        .loading-spinner {
            border: 4px solid rgba(66, 133, 244, 0.3);
            border-radius: 50%;
            border-top: 4px solid #4285f4;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .loading-text {
            margin-top: 1rem;
            color: #666;
        }
    </style>
</head>

<body>
    <!-- 加载状态覆盖层 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner"></div>
        <div class="loading-text">加载中...</div>
    </div>
    
    <!-- 延迟加载JavaScript -->
    <script>
        // 监听DOMContentLoaded事件，确保DOM已加载
        document.addEventListener('DOMContentLoaded', function() {
            // 隐藏加载覆盖层
            setTimeout(function() {
                const loadingOverlay = document.getElementById('loadingOverlay');
                if (loadingOverlay) {
                    loadingOverlay.classList.add('hidden');
                }
            }, 500); // 小延迟以确保平滑过渡
        });
        
        // 监听页面加载完成事件
        window.addEventListener('load', function() {
            // 确保所有资源都已加载后完全隐藏加载覆盖层
            setTimeout(function() {
                const loadingOverlay = document.getElementById('loadingOverlay');
                if (loadingOverlay) {
                    loadingOverlay.style.display = 'none';
                }
            }, 800);
        });
    </script>
    <header>
        <h1>PWA应用示例</h1>
        <div class="status-bar" id="statusBar">
            正常运行中
        </div>
    </header>

    <main>
        <h1>我的H5应用</h1>
        <p>这是一个使用Workbox构建的PWA示例应用。</p>

        <!-- 更新提示区域 -->
        <div class="update-prompt" id="updatePrompt" style="display: none;">
            <p>检测到应用有新的更新！</p>
            <button id="updateButton">立即更新</button>
        </div>

        <!-- 内容区域 -->
        <div class="content" id="appContent">
            <!-- 动态内容将在这里加载 -->
        </div>

        <!-- 添加到桌面按钮 -->
        <button id="installButton" class="install-button" disabled>
            添加到桌面
        </button>
        
        <!-- 清除缓存按钮 -->
        <button id="clearCacheButton" class="install-button" style="margin-left: 10px;">
            清除缓存
        </button>
        
        <div class="instructions" id="instructions" style="display: block;">
            <p>如果没有看到按钮，请手动添加：</p>
            <p id="manualInstructions">
                iOS: 点击分享按钮 → 添加到主屏幕<br>
                Android: 点击菜单 → 添加到主屏幕
            </p>
        </div>
    </main>

    <footer>
        <p>PWA示例应用</p>
    </footer>

    <!-- JavaScript将由Webpack自动注入 -->
</body>

</html>